<template>
    <div class="container">
        <view-box ref="viewBox">
            <flexbox orient="vertical">

                <flexbox-item>
                    <div class="banner">
                        <div class="bg-banner"></div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="list-box">
                        <div class="title">加盟5大优势</div>

                        <div class="list-item">
                            <div class="icon">
                                <i class="iconfont icon-chanyeshuju"></i>
                            </div>
                            <div class="content">
                                <div class="box">
                                    <span class="t1">稳定的出租率</span>
                                    <span class="s1">统一推广，精准营销，让出租率领先同行</span>
                                </div>
                            </div>
                        </div>

                        <div class="list-item">
                            <div class="icon">
                                <i class="iconfont icon-yunyingpingtai"></i>
                            </div>
                            <div class="content">
                                <div class="box">
                                    <span class="t1">专业支持团队</span>
                                    <span class="s1">专属的专业支持团队，适时支持，跟踪服务</span>
                                </div>
                            </div>
                        </div>

                        <div class="list-item">
                            <div class="icon">
                                <i class="iconfont icon-shanxiyidongwanggehuayunyingzhichengpingtai02"></i>
                            </div>
                            <div class="content">
                                <div class="box">
                                    <span class="t1">运营平台</span>
                                    <span class="s1">领先的租车系统，共享多个平台，实时轻松管理</span>
                                </div>
                            </div>
                        </div>

                        <div class="list-item">
                            <div class="icon">
                                <i class="iconfont icon-fengxianbaozhang"></i>
                            </div>
                            <div class="content">
                                <div class="box">
                                    <span class="t1">风险管控</span>
                                    <span class="s1">成熟的风控体系，让人和车安全无忧</span>
                                </div>
                            </div>
                        </div>

                        <div class="list-item">
                            <div class="icon">
                                <i class="iconfont icon-chanyelian"></i>
                            </div>
                            <div class="content">
                                <div class="box">
                                    <span class="t1">产业延伸</span>
                                    <span class="s1">车辆采购、维护、新车、二手车销售等产业链收入多元化</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">加盟合作内容</div>
                        <div class="content center">
                            <table class="tb">
                                <tr>
                                    <td>短租自驾</td>
                                    <td>长租</td>
                                    <td>以租代购</td>
                                </tr>
                                <tr>
                                    <td>二手车销售</td>
                                    <td>车辆采购</td>
                                    <td>客户发展</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">加盟合作条件</div>
                        <div class="content center tt">
                            有志于汽车销售、汽车后市场的个人或企业
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="jmsq">
                        <span>加盟申请</span>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="form">
                        <x-input title="姓名" name="realName" is-type="china-name"></x-input>
                        <x-input title="手机" name="mobile" is-type="china-mobile"></x-input>
                        <x-input title="地址" name="address"></x-input>
                        <x-input title="邮箱" name="email" is-type="email"></x-input>
                        <x-input title="留言" name="message"></x-input>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="submit">
                        <x-button :gradients="['#eb5d11', '#eb5d11']">提交申请</x-button>
                    </div>
                </flexbox-item>

            </flexbox>
        </view-box>
    </div>
</template>

<script>
    import { ViewBox, Scroller, Swiper, Flexbox, FlexboxItem, Grid, GridItem, XInput, XButton } from 'vux'
    export default {
        name: 'Jm5dys',
        components: {
            ViewBox,
            Scroller,
            Swiper,
            Flexbox,
            FlexboxItem,
            Grid,
            GridItem,
            XInput,
            XButton
        },
        data() {
            return {
            }
        },
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .banner{
        height: 180px;
        display: block;
        .bg-banner{
            width: 100%;
            height: 100%;
            background: url("../../assets/swiper/swiper3.png") center center no-repeat;
            background-size: cover;
        }
    }
    .list-box{
        padding: 0 20px;
        .title{
            text-align: center;
            color: #eb5d11;
            font-size: 18px;
            font-weight: bold;
            border: 2px solid #eb5d11;
            border-radius: 5px;
            box-shadow: 0px 0px 20px #fef2ea;
            margin-top: 10px;
        }
        .list-item{
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            .icon{
                text-align: center;
                width: 80px;
                min-width: 80px;
                height: 60px;
                line-height: 60px;
                i{
                    display: inline-block;
                    font-size: 45px;
                    color: #eb5d11;
                }
            }
            .content{
                display: flex;
                align-items: center;
                font-size: 12px;
                .box{
                    .t1{
                        display: block;
                        font-weight: bold;
                    }
                    .s1{
                        display: block;
                        color: #666666;
                    }
                }
            }
        }

    }
    .text-box{
        padding: 0 20px;
        .title{
            text-align: center;
            color: #eb5d11;
            font-size: 18px;
            font-weight: bold;
            border: 2px solid #eb5d11;
            border-radius: 5px;
            box-shadow: 0px 0px 20px #fef2ea;
            margin-top: 10px;
        }
        .content{
            color: #666666;
            font-size: 12px;
            .tb{
                margin-top:10px;
                width: 100%;
                border-spacing: 0;
                color: #000;
                font-weight: bold;
                td{
                    height: 40px;
                    line-height: 40px;
                }
                tr:nth-child(1) {
                    td {
                        border: 1px solid #eb5d11;
                        border-top: none;
                    }
                    td:nth-child(1) {
                        border-left: none;
                        border-right: none;
                    }
                    td:nth-child(3) {
                        border-left: none;
                        border-right: none;
                    }
                }
                tr:nth-child(2) {
                    td {
                        border: 1px solid #eb5d11;
                        border-bottom: none;
                        border-top: none;
                    }
                    td:nth-child(1) {
                        border-left: none;
                        border-right: none;
                    }
                    td:nth-child(3) {
                        border-left: none;
                        border-right: none;
                    }
                }

            }
        }
        .center{
            text-align: center;
        }
        .tt{
            padding-top: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #000;
        }
    }

    .jmsq{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        margin-top: 10px;
        span{
            display: inline-block;
            line-height: 40px;
            font-size: 22px;
            font-weight: bold;
            color: #eb5d11;
            border: 1px solid #eb5d11;
            width: 100%;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 3px #ffe4c6;
        }
    }
    .form {
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        .weui-cell {
            padding-left: 0;

        }
    }
    .submit{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
    }
</style>